<template>
  <section>
    <new-tinymce api-key="4tzama1ehej7pb730d65tpd1ua3v4y6onxrwmnrf9hcklna2" :init='editorConfig' v-model="content"></new-tinymce>
    <el-dialog :visible.sync="getFileDialog" append-to-body>
      <choice-box :show-dialog="getFileDialog" @cancel="getFileDialog=false" @success="fileCallback"></choice-box>
    </el-dialog>
  </section>
</template>

<script>
  import newTinymce from '@tinymce/tinymce-vue'
  import tinymceEditor from 'vue-tinymce-editor'
  import choiceBox from '@/components/fileManager/subs/choiceBox'
  export default {
    name: "tinymce",
    props:['value'],
    components:{tinymceEditor,newTinymce,choiceBox},
    data() {
      return {
        getFileDialog:false,
        content:'<p>请在此处编辑……</p>',
        editorConfig:{
          menubar:false,
          language_url: '/static/tinymce/langs/zh_CN.js',
          // width:100,
          height:200,
          toolbar:'fontselect | formatselect | fontsizeselect bold italic underline strikethrough forecolor backcolor |  link unlink | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat | image importimg code ',
          plugins:['link','lists','image','imagetools','code','table','colorpicker','textcolor','wordcount','contextmenu'],
          setup:(editor) => {
            let that = this
            editor.addButton('importimg',{
              icon:'image',
              tooltip:'导入图片',
              onclick:function(){
                that.getFileDialog = true
              }
            })
          }
        },

      }
    },
    mounted(){
      if(this.value !=='') this.content= this.value
    },
    watch:{
      content(nv,ov){
        this.$emit('input',nv)
      },
      message(nv,ov){
        // console.log('传来的msg更新变化--------',nv)
      }
    },
    created(){
      // console.log('create--tinymce---',this.value)
    },
    methods: {
      test(){
        // console.log('msg-----',this.msg)
        // console.log('message-----',this.message)
      },
      save(){
        // console.log('msg-----',this.msg)
        // this.$emit('save',this.msg)
      },
      fileCallback(files){
        files.forEach(f=>{
          this.content += "<p><img src=\""+f.uri+"\" alt=\"\" /></p>"
        })
        this.getFileDialog = false
      },
    }
  }
</script>

<style scoped>

</style>
